<template>
  <div class="sys-dict">
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item.value)">
        <span
          v-if="(item.listClass == 'default' || item.listClass == '') && (item.cssClass == '' || item.cssClass == null)"
          :key="item.value"
          :index="index"
          :class="item.cssClass"
        >{{ item.label + ' ' }}</span
        >
        <el-tag
          v-else
          :disable-transitions="true"
          :key="item.value"
          :index="index"
          :type="item.listClass == 'primary' ? '' : item.listClass"
          :class="item.cssClass"
        >
          {{ item.label + ' ' }}
        </el-tag>
      </template>
    </template>
  </div>
</template>
<script>
export default {
  name: 'sys-dict',
  cnName: '我的字典',
  props: {
    dictType: String,
    value: String
  },
  data() {
    return {
      options: []
    }
  },
  methods: {
    async init() {
      this.options = await this.$store.dispatch('loadDictByType', {dictType: this.dictType})
    }
  },
  computed: {
    values() {
      if (this.value === null || typeof this.value === 'undefined' || this.value === '') return []
      return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator)
    }
  },
  mounted() {
    this.init()
  }
}
</script>
<style scoped lang="scss">

</style>
